
import React, { useState } from 'react';

import styles from './index.less';
import Courses from './courses';
import Teachers from './Teachers';
import Articles from './articles';

export default function (props) {
  const [tab, setTab] = useState('article');
  const renderList = () => {
    if (tab === 'course') return <Courses />;
    if (tab === 'teacher') return <Teachers />;
    if (tab === 'article') return <Articles />;
  }
  return (
    <>
      <div className={styles.banner}>
        <div className={styles.scene}>拍客艺术专场</div>
        <div className={styles.name}>拍客艺术全套</div>
        <div className={styles.price}>￥<span>9.9</span>立即抢购</div>
        <img src="//img.ui.cn/data/vip/1618386703" alt="" />
        <div className={styles.search_box}>
          <div className={styles.search_icon}></div>
          <input type="text" placeholder="搜索课程/教师/文章" />
          <div className={styles.scan_icon}></div>
        </div>
      </div>
      <div className={styles.content}>
        <ul className={styles.tabs}>
          <li key={'公开课'}>公开课</li>
          <li className={tab === 'teacher' ? styles.active : ''} onClick={() => setTab('teacher')} key={'优秀讲师'}>优秀讲师</li>
          <li className={tab === 'course' ? styles.active : ''} onClick={() => setTab('course')} key={'推荐课程'}>推荐课程</li>
          <li className={tab === 'article' ? styles.active : ''} onClick={() => setTab('article')} key={'头条消息'}>头条消息</li>
          <li key={'抽奖'}>抽奖</li>
        </ul>
        {renderList()}

      </div>
    </>
  );
}
